<script lang="ts">
  interface IconDef {
    w: number;
    h: number;
    name: string;
    svg: string;
  }

  const props = $props();
  const name = props.name as string;
  const width = (props.width as string) ?? "1.5rem";
  const height = (props.height as string) ?? "1.5rem";
  const focusable = (props.focusable as boolean) ?? false;
  const class_ = (props.class_ as string) ?? "";

  const icons: IconDef[] = [
    {
      w: 2048,
      h: 1792,
      name: "contact",
      svg: `<path d="M1024 1131q0-64-9-117.5t-29.5-103-60.5-78-97-28.5q-6 4-30 18t-37.5 21.5-35.5 17.5-43 14.5-42 4.5-42-4.5-43-14.5-35.5-17.5-37.5-21.5-30-18q-57 0-97 28.5t-60.5 78-29.5 103-9 117.5 37 106.5 91 42.5h512q54 0 91-42.5t37-106.5zm-157-520q0-94-66.5-160.5t-160.5-66.5-160.5 66.5-66.5 160.5 66.5 160.5 160.5 66.5 160.5-66.5 66.5-160.5zm925 509v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm0-260v-56q0-15-10.5-25.5t-25.5-10.5h-568q-15 0-25.5 10.5t-10.5 25.5v56q0 15 10.5 25.5t25.5 10.5h568q15 0 25.5-10.5t10.5-25.5zm0-252v-64q0-14-9-23t-23-9h-576q-14 0-23 9t-9 23v64q0 14 9 23t23 9h576q14 0 23-9t9-23zm256-320v1216q0 66-47 113t-113 47h-352v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-768v-96q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v96h-352q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1728q66 0 113 47t47 113z"/>`
    },
    {
      w: 32,
      h: 32,
      name: "trash",
      svg: `<path d="M12 12h2v12h-2z" /><path d="M18 12h2v12h-2z" /><path d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20z" /><path d="M12 2h8v2h-8z" />`
    },
    {
      name: "device",
      w: 2048,
      h: 1792,
      svg: `<path d="M685 483q16 0 27.5-11.5t11.5-27.5-11.5-27.5-27.5-11.5-27 11.5-11 27.5 11 27.5 27 11.5zm422 0q16 0 27-11.5t11-27.5-11-27.5-27-11.5-27.5 11.5-11.5 27.5 11.5 27.5 27.5 11.5zm-812 184q42 0 72 30t30 72v430q0 43-29.5 73t-72.5 30-73-30-30-73v-430q0-42 30-72t73-30zm1060 19v666q0 46-32 78t-77 32h-75v227q0 43-30 73t-73 30-73-30-30-73v-227h-138v227q0 43-30 73t-73 30q-42 0-72-30t-30-73l-1-227h-74q-46 0-78-32t-32-78v-666h918zm-232-405q107 55 171 153.5t64 215.5h-925q0-117 64-215.5t172-153.5l-71-131q-7-13 5-20 13-6 20 6l72 132q95-42 201-42t201 42l72-132q7-12 20-6 12 7 5 20zm477 488v430q0 43-30 73t-73 30q-42 0-72-30t-30-73v-430q0-43 30-72.5t72-29.5q43 0 73 29.5t30 72.5z"/>`
    },
    {
      name: "fingerprint",
      w: 32,
      h: 32,
      svg: `<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><path d="m4.2 27.3.5-1c2-3.8 3-7.9 3-12.1v0c0-4.3 3.4-8 7.9-8.2a8 8 0 0 1 8.4 7.8v4.9c0 1.4.8 2.6 2 3.2h0"/><path d="M3.9 14.6c0-7 5.3-12.6 12-12.6s12 5.6 12 12.6V18"/><path d="m7.3 30 .1-.2a31 31 0 0 0 4.8-16.3v0c0-1.8 1.5-3.4 3.5-3.5 2.1-.1 3.9 1.4 3.9 3.3v0c.4 7.7-3.9 16.6-3.9 16.6"/><path d="m16 14-.2 1.4c-.6 5-1.9 9.9-3.8 14.6h0"/></g>`
    },
    {
      name: "sun",
      w: 24,
      h: 24,
      svg: `<path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2a7 7 0 1 1 0-14 7 7 0 0 1 0 14zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>`
    },
    {
      name: "moon",
      w: 24,
      h: 24,
      svg: `<path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26 5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/>`
    },
    {
      name: "network",
      w: 24,
      h: 24,
      svg: `<path d="M17 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM7 16a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm10-8a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM7 8a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM19.071 7.071l-10 10-1.414-1.414 10-10 1.414 1.414z"/>`
    },
    {
      name: "logo",
      w: 210,
      h: 210,
      svg: `<circle class="fill-gray-50 dark:fill-gray-800" cx="105" cy="105" r="105" />
            <circle class="fill-current text-gray-800 dark:text-gray-100" cx="134.5" cy="129.5" r="6" />
            <circle class="fill-current text-gray-800 dark:text-gray-100" cx="104" cy="170" r="6" />
            <circle class="fill-current text-gray-800 dark:text-gray-100" cx="50.8" cy="63.5" r="6" />
            <path class="fill-current text-gray-800 dark:text-gray-100" d="m176.7 38.5-18.6 18.3a71.6 71.6 0 0 1-42 117.8 13 13 0 0 1-24.3 0A71.6 71.6 0 0 1 40.4 71.4a13 13 0 0 1 10.4-21 12.9 12.9 0 0 1 4.9 1 71.6 71.6 0 0 1 96-1L170 31.7a97.8 97.8 0 1 0 6.8 6.8z" />
            <path class="fill-current text-gray-800 dark:text-gray-100" d="M116.3 165.3a62.5 62.5 0 0 0 35.2-102l-13.4 13.1a43.8 43.8 0 0 1 6.4 44.6 13 13 0 0 1-16.6 19.7 43.7 43.7 0 1 1 4.2-70.4l13.1-13.4a62.4 62.4 0 0 0-82.7.6 13 13 0 0 1 1.4 6 13.1 13.1 0 0 1-13 13 13.4 13.4 0 0 1-2.7-.2 62.5 62.5 0 0 0 43.5 89 13 13 0 0 1 24.6 0z" />
            <path class="fill-current text-gray-800 dark:text-gray-100" d="M112.2 101.9a7.9 7.9 0 0 1 .3 2.1 8.3 8.3 0 1 1-8.3-8.3 8.5 8.5 0 0 1 2.5.4l19.4-19.6a35.1 35.1 0 1 0-3.7 57.6 13 13 0 0 1 12.2-17.7 12.8 12.8 0 0 1 2.5.2 35.1 35.1 0 0 0-5-34.1z" />`
    }
  ];

  const displayIcon = $derived(icons.find((e) => e.name === name));
</script>

{#if displayIcon}
  <svg
    fill="currentColor"
    class={`inline-block ${class_}`}
    focusable={focusable ? 'true' : 'false'}
    {width}
    {height}
    viewBox="0 0 {displayIcon.w} {displayIcon.h}"
  >
    {@html displayIcon.svg}
  </svg>
{/if}
